<%--
  Created by IntelliJ IDEA.
  User: peizangpin
  Date: 2017/9/10
  Time: 下午2:46
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@include file="../commons-bootstrap.jsp"%>
<!DOCTYPE html>
<html>
<head>
    <title>对象管理</title>
    <style type="text/css" >
        .objectTypePanel{
            width:280px;
            height:50px;
            /*padding:5px;*/
        }
        .leftTree{
            width:300px;
            height:calc(100% - 70px);
            margin-bottom:0px;
        }
        body{
            padding:10px;
        }
        .leftPanel{
            float:left;
            margin:10px;
        }
        .centerPanel{
            margin:10px;
            width:calc(100% - 350px);
            height:calc(100% - 20px);
            float:left;
        }
        #objectTypeBox{
            width:200px;
            float:left;
            margin-right:10px;
        }
        .objectTypeSetting{
            padding:5px;
            width:35px;
        }


    </style>

    <script type="text/javascript" src="<%=basePath%>common/script/customize/customize.js"></script>
    <!-- dropDownPanel部分 -->
    <link rel="stylesheet" href="<%=basePath%>common/script/customize/bootstrap/dropDownPanel.css">
    <script type="text/javascript" src="<%=basePath%>common/script/customize/bootstrap/dropDownPanel.js"></script>

    <!-- tree部分 -->
    <link rel="stylesheet" href="<%=basePath%>common/script/customize/bootstrap/tree.css">
    <script type="text/javascript" src="<%=basePath%>common/script/customize/bootstrap/tree.js"></script>

    <script type="text/javascript" >

        /* --- 分割线 --- */

        $(document).ready(function(){
            $('#objectTypeBox').dropDownPanel('init',{
                showPanelFn:searchObjectType
                ,hidePanelFn:null
            });
        });

        /* --- 分割线 --- */
        function searchObjectType(panelJq){
            $.ajax({
                url:basePath+'objectAction/searchObjectType.json'
                ,type:'get'
                ,data:{text:''}
                ,beforeSend:function(){
                    $('#objectTypeBox').dropDownPanel('panelLoading','loading');
                }
                ,success:function(data){
                    $('#objectTypeBox').dropDownPanel('panelLoading','stop');
                    panelJq.empty();
                    if(CommonUtils.isBlank(data)){
                        return;
                    }
                    setObjectType(data);
                }
                ,error:function(eData){
                    alert("加载类别失败！");
                }
            });
        }

        function setObjectType(data){
            data.forEach(function(item,index,arr){
                item.text=item.objectName+'('+item.objectCode+')';
            });
            $('#objectTypeBox').dropDownPanel('setPanelUl',{
                array:data
                ,onClick:function(item,index,array){
                    $('#objectTypeBox').dropDownPanel('hidePanel');
                    $('#objectTypeBox').find('input').val(item.text);
                    initOrRefreshTree(item.objectId);
                }
            });
        }

        function initOrRefreshTree(parentId){

            if($('#objectTree').data('tree-init-success')){
                $('#objectTree').tree('getOption').param.parentId = parentId;
                $('#objectTree').tree('refresh');
                return;
            }

            $('#objectTree').tree('init',{
                idField:'id'
                ,parentIdField:'_parentId'
                ,textFormatter:function(item,index,arr){
                    return item.text;
                }
                ,stateField:'state'
                ,data:undefined
                ,url:basePath+'objectAction/findByTree.json'
                ,method:'get'
                ,param:{parentId:parentId}
                ,onClick:function(node,index,array){
                    console.info(node);
                }
                ,stateField:'state'
                ,onSuccessInit:function(){
                    $(this).data('tree-init-success',true);
                }
            });
        }


    </script>
</head>
<body class="container-fluid">
    <div class="leftPanel">
        <div class="objectTypePanel">
            <div  id="objectTypeBox" >
                <input type="text" class="form-control" style="cursor:pointer;" placeholder="请选择对象类别" readonly />
            </div>
            <button type="button" style="" class="btn btn-warning objectTypeSetting"><span class="iconfont icon-setting"></span></button>
        </div>
        <div class="panel panel-default leftTree">
            <ul id="objectTree" class="tree list-group">
                <%--<li class="list-group-item">--%>
                    <%--<span  class="treeIcon tree-expanded"></span><span class="iconfont icon-folder-open"></span>--%>
                    <%--test1--%>
                    <%--<ul class="list-group">--%>
                        <%--<li class="list-group-item"><i  class="treeIcon tree-collapsed"></i><i class="iconfont icon-folder-close"></i> test1</li>--%>
                        <%--<li class="list-group-item"><i  class="treeIcon tree-collapsed"></i><i class="iconfont icon-folder-close" ></i> test1</li>--%>
                        <%--<li class="list-group-item"><i  class="treeIcon tree-collapsed"></i><i class="iconfont icon-folder-close" ></i> test1</li>--%>
                    <%--</ul>--%>
                <%--</li>--%>
                <%--<li class="list-group-item"><i  class="treeIcon tree-collapsed"></i><i class="iconfont icon-folder-close"></i>test1</li>--%>
                <%--<li class="list-group-item"><i  class="treeIcon tree-collapsed"></i><i class="iconfont icon-folder-close"></i>test1</li>--%>
                <%--<li class="list-group-item"><i  class="treeIcon"></i><i class="iconfont icon-file"></i>test1</li>--%>
                <%--<li class="list-group-item">test1</li>--%>
                <%--<li class="list-group-item">test1</li>--%>
            </ul>
        </div>
    </div>
    <div class="panel panel-info centerPanel">
    </div>
</body>
</html>
